<template>
  <div :data-type="type" class="function-type-node-4-list">
    <div class="icon">
      <component
        :is="operatorTypeInfoMapping.get(type).icon"
        :property="{
            theme: 'filled',
            strokeWidth: 3
          }"
      />
    </div>
    <div class="name">{{ name }}</div>
  </div>
</template>

<script setup lang="ts">
import { operatorTypeInfoMapping } from '@/views/main/data-flow/design/index'

defineProps({
  type: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  }
})
</script>

<style scoped lang="scss">
.function-type-node-4-list {
  color: #565758;
  width: 150px;
  height: 35px;
  border: 1px dashed #999;
  margin: 5px 0;
  border-radius: 5px;
  padding: 5px 5px 5px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;

  .icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .name {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.function-type-node-4-list:hover {
  cursor: move;
  background-color: #f0f7ff;
  border: 1px dashed #1879ff;
  border-left: 4px solid #1879ff;
  padding-left: 5px;
}
</style>
